<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>分配</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/bootstrap-datetimepicker.css" rel="stylesheet" />
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="fontAwesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/common.css" rel="stylesheet" />
    <link href="css/currency.css" rel="stylesheet" />
    <link href="css/main.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
  </head>
<body>
    <div class="main-content">
        <div class="nav-list-title">
            <ul class="list-title-crumbs">
                <li>
                  <i class="fa fa-map-marker mainTone"></i>
                  <a class="text">客户列表</a>
                  <i class="fa fa-angle-right"></i>
                </li>
                <li><a class="mainTone">分配</a></li>
            </ul>
        </div>
        <div class="item-info-surround">
            <h3 class="item-title">查询条件</h3>
            <ul class="exhibition-list">
                <li class="col-lg-4 col-md-6">
                    <div class="currency-template-query">
                        <label class="template-title"><span class="required">*</span>项目名称:</label>
                        <div class="template-controls">
                            <select class="form-control">
                                <option>请选择</option>
                                <option>1</option>
                                <option>2</option>
                            </select>
                        </div>
                    </div>
                </li>
                <li class="col-lg-4 col-md-6">
                    <div class="currency-template-query">
                        <label class="template-title">新归属人:</label>
                        <div class="template-controls">
                            <select class="form-control">
                                <option>请选择</option>
                                <option>1</option>
                                <option>2</option>
                            </select>
                        </div>
                    </div>
                </li>
                <li class="col-lg-4 col-md-6">
                    <div class="currency-template-query">
                        <label class="template-title">分配人:</label>
                        <div class="template-controls">
                            <select class="form-control">
                                <option>请选择</option>
                                <option>1</option>
                                <option>2</option>
                            </select>
                        </div>
                    </div>
                </li>
                <li class="col-lg-4 col-md-6">
                    <div class="currency-template-query">
                        <label class="template-title">分配期间:</label>
                        <div class="template-controls">
                            <div class="time-selector">
                              <div class="time-selector-list date form_datetime">
                                <input type="text" class="form-control" placeholder="请选择">
                                <span class="timeIcon add-on"><i class="fa fa-calendar"></i></span>
                              </div>
                              <div class="interval-span">-</div>
                              <div class="time-selector-list date form_datetime">
                                <input type="text" class="form-control" placeholder="请选择">
                                <span class="timeIcon add-on"><i class="fa fa-calendar"></i></span>
                              </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="col-lg-8 col-md-12">
                    <div class="currency-template-query">
                        <label class="template-title">客户状态:</label>
                        <div class="template-controls">
                            <ul class="checkbox">
                                <li>
                                    <label>
                                      <input type="checkbox" >问询
                                    </label>
                                </li>
                                <li>
                                    <label>
                                      <input type="checkbox" >来访
                                    </label>
                                </li>
                                <li>
                                    <label>
                                      <input type="checkbox" >认筹
                                    </label>
                                </li>
                                <li>
                                    <label>
                                      <input type="checkbox" >认购
                                    </label>
                                </li>
                                <li>
                                    <label>
                                      <input type="checkbox" >签约
                                    </label>
                                </li>
                                <li>
                                    <label>
                                      <input type="checkbox" >无意向
                                    </label>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li class="col-sm-12">
                    <div class="currency-template-query">
                        <label class="template-title">需求面积:</label>
                        <div class="template-controls">
                            <ul class="checkbox">
                                <li>
                                    <label>
                                      <input type="checkbox" >A
                                    </label>
                                </li>
                                <li>
                                    <label>
                                      <input type="checkbox" >B
                                    </label>
                                </li>
                                <li>
                                    <label>
                                      <input type="checkbox" >C
                                    </label>
                                </li>
                                <li>
                                    <label>
                                      <input type="checkbox" >D
                                    </label>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li class="col-sm-12">
                    <div class="currency-template-query">
                        <label class="template-title">客户来源:</label>
                        <div class="template-controls">
                            <ul class="checkbox">
                                <li>
                                    <label>
                                      <input type="checkbox" >自然到访
                                    </label>
                                </li>
                                <li>
                                    <label>
                                      <input type="checkbox" >员工
                                    </label>
                                </li>
                                <li>
                                    <label>
                                      <input type="checkbox" >工抵
                                    </label>
                                </li>
                                <li>
                                    <label>
                                      <input type="checkbox" >全员营销
                                    </label>
                                </li>
                                <li>
                                    <label>
                                      <input type="checkbox" >外部推荐
                                    </label>
                                </li>
                                <li>
                                    <label>
                                      <input type="checkbox" >渠道客户
                                    </label>
                                </li>
                                <li>
                                    <label>
                                      <input type="checkbox" >老带新
                                    </label>
                                </li>
                                <li>
                                    <label>
                                      <input type="checkbox" >分销推荐
                                    </label>
                                </li>
                                <li>
                                    <label>
                                      <input type="checkbox" >call客
                                    </label>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="query-operation">
                <div class="fr">
                    <button class="btn">查询</button>
                    <a href="javascript:;" class="empty">清空</a>
                </div>
            </div>
        </div>
        <div class="item-info-surround">
            <ul class="nav-list-cell">
              <li class="active"><a href="javascript:;">已分配</a><span class="col">|</span></li>
              <li><a href="javascript:;">待分配</a><span class="col">|</span></li>
            </ul>
            <ul class="info-details-list">
                <li class="details-list-li active">
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered min-width-1150">
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>客户名称</th>
                                    <th>联系电话</th>
                                    <th>性别</th>
                                    <th>生日</th>
                                    <th>意向等级</th>
                                    <th>客户状态</th>
                                    <th>处理状态</th>
                                    <th>处理结果</th>
                                    <th>处理时间</th>
                                    <th>新归属人</th>
                                    <th>分配人</th>
                                    <th>分配时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>王木木</td>
                                    <td>13817486548</td>
                                    <td>男</td>
                                    <td>1992-10-16</td>
                                    <td>D</td>
                                    <td>来访</td>
                                    <td>已处理</td>
                                    <td>
                                        <div class="across-show" data-toggle="tooltip" data-placement="bottom" title="我是测试数据我是测试数据我是测试数据我是测试数据1">
                                            划过查看
                                        </div>
                                    </td>
                                    <td>2016-12-31 19:27:00</td>
                                    <td>小王</td>
                                    <td>小王</td>
                                    <td>2016-12-31 19:27:00</td>
                                    <td>
                                        <a href="javascript:;" class="operationBtn">分配</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>1</td>
                                    <td>王木木</td>
                                    <td>13817486548</td>
                                    <td>男</td>
                                    <td>1992-10-16</td>
                                    <td>D</td>
                                    <td>来访</td>
                                    <td>已处理</td>
                                    <td>
                                        <div class="across-show" data-toggle="tooltip" data-placement="bottom" title="我是测试数据我是测试数据我是测试数据我是测试数据1">
                                            划过查看
                                        </div>
                                    </td>
                                    <td>2016-12-31 19:27:00</td>
                                    <td>小王</td>
                                    <td>小王</td>
                                    <td>2016-12-31 19:27:00</td>
                                    <td>
                                        <a href="javascript:;" class="operationBtn">分配</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>1</td>
                                    <td>王木木</td>
                                    <td>13817486548</td>
                                    <td>男</td>
                                    <td>1992-10-16</td>
                                    <td>D</td>
                                    <td>来访</td>
                                    <td>已处理</td>
                                    <td>
                                        <div class="across-show" data-toggle="tooltip" data-placement="bottom" title="我是测试数据我是测试数据我是测试数据我是测试数据2">
                                            划过查看
                                        </div>
                                    </td>
                                    <td>2016-12-31 19:27:00</td>
                                    <td>小王</td>
                                    <td>小王</td>
                                    <td>2016-12-31 19:27:00</td>
                                    <td>
                                        <a href="javascript:;" class="operationBtn">分配</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>1</td>
                                    <td>王木木</td>
                                    <td>13817486548</td>
                                    <td>男</td>
                                    <td>1992-10-16</td>
                                    <td>D</td>
                                    <td>来访</td>
                                    <td>已处理</td>
                                    <td>
                                        <div class="across-show" data-toggle="tooltip" data-placement="bottom" title="我是测试数据我是测试数据我是测试数据我是测试数据3">
                                            划过查看
                                        </div>
                                    </td>
                                    <td>2016-12-31 19:27:00</td>
                                    <td>小王</td>
                                    <td>小王</td>
                                    <td>2016-12-31 19:27:00</td>
                                    <td>
                                        <a href="javascript:;" class="operationBtn">分配</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>1</td>
                                    <td>王木木</td>
                                    <td>13817486548</td>
                                    <td>男</td>
                                    <td>1992-10-16</td>
                                    <td>D</td>
                                    <td>来访</td>
                                    <td>已处理</td>
                                    <td>
                                        <div class="across-show" data-toggle="tooltip" data-placement="bottom" title="我是测试数据我是测试数据我是测试数据我是测试数据4">
                                            划过查看
                                        </div>
                                    </td>
                                    <td>2016-12-31 19:27:00</td>
                                    <td>小王</td>
                                    <td>小王</td>
                                    <td>2016-12-31 19:27:00</td>
                                    <td>
                                        <a href="javascript:;" class="operationBtn">分配</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </li>
                <li  class="details-list-li">111</li>
            </ul>
        </div>
    </div> 
</body>
<script type="text/javascript">
    $(function(){
        
        $(".form_datetime").datetimepicker({
            format: "yyyy-mm-dd",//日yyyy-mm-dd hh:ii
            autoclose: true,
            todayBtn: true,
            minView:2,//显示到天设置2、显示到时设置1、显示到分设置0
            startView:2,//首先显示的视图
            pickerPosition: "bottom-left"
            // startDate: "2016-12-14 10:00"
        });

        $(".nav-list-cell li").click(function(){
            $(this).addClass("active").siblings().removeClass("active");
            var num = $(this).index();
            showInfoDtails(num);
        })
        function showInfoDtails(index){
            $(".info-details-list .details-list-li").eq(index).addClass().addClass("active").siblings().removeClass("active");
        }
        $(".across-show").hover(function(){
            $(this).tooltip('show')
        })
    })
</script>
</html>
